<template>
  <div class="top-right-btn" :style="style">
    <el-row>
      <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top" v-if="search">
        <el-button size="mini" circle icon="el-icon-search" @click="toggleSearch()" />
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="刷新" placement="top">
        <el-button size="mini" circle icon="el-icon-refresh" @click="refresh()" />
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns">
        <el-dropdown trigger="click" :hide-on-click="false" style="padding-left: 12px">
          <el-button size="mini" circle icon="el-icon-menu" />
          <el-dropdown-menu slot="dropdown">
            <template v-for="(item, key) in columns">
              <el-dropdown-item>
                <el-checkbox :checked="item.show" @change="checkboxChange($event, key)" :label="item.label" />
              </el-dropdown-item>
            </template>
          </el-dropdown-menu>
        </el-dropdown>
      </el-tooltip>
    </el-row>
  </div>
</template>
<script>
  export default {
    name: 'RightToolbar',
    data() {
      return {
        // 显隐数据
        value: [],
        // 弹出层标题
        title: '显示/隐藏',
        // 是否显示弹出层
        open: false
      }
    },
    props: {
      /* 是否显示检索条件 */
      showSearch: {
        type: Boolean,
        default: true
      },
      /* 显隐列信息 */
      columns: {
        type: Object
      },
      /* 是否显示检索图标 */
      search: {
        type: Boolean,
        default: true
      },
      /* 右外边距 */
      gutter: {
        type: Number,
        default: 10
      }
    },
    computed: {
      style() {
        const ret = {}
        if (this.gutter) {
          ret.marginRight = `${this.gutter / 2}px`
        }
        return ret
      }
    },
    methods: {
      // 搜索
      toggleSearch() {
        this.$emit('update:showSearch', !this.showSearch)
      },
      // 刷新
      refresh() {
        this.$emit('refresh')
      },
      // 勾选
      checkboxChange(event, key) {
        this.columns[key].show = event
      }
    }
  }
</script>
<style lang="scss" scoped>
  .top-right-toolbar {
    position: relative;
    float: right;
    white-space: nowrap;
  }
  ::v-deep .el-transfer__button {
    border-radius: 50%;
    padding: 12px;
    display: block;
    margin-left: 0;
  }
  ::v-deep .el-transfer__button:first-child {
    margin-bottom: 10px;
  }
</style>
